<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <style type="text/css">
        .login-wrap {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding-top: 10%;
            background-image: url();
            /* background-color: #112346; */
            background-repeat: no-repeat;
            background-position: center right;
            background-size: 100%;
        }

        .login-container {
            border-radius: 10px;
            margin: 0px auto;
            width: 450px;
            padding: 30px 35px 15px 35px;
            background: #fff;
            border: 1px solid #eaeaea;
            text-align: left;
            box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
        }

        .title {
            margin: 0px auto 30px auto;
            text-align: center;
            color: #505458;
        }

        .el-form-item {
            margin-bottom: 5px;
        }

        .el-input {
            width: 350px;

        }

    </style>
</head>
<body>
<el-form ref="registerForm" :model="registerForm" status-icon :rules="rules" label-position="right" label-width="100px"
         class="login-container" size="small" id="app" enctype="multipart/form-data">
    <h3 class="title">商家注册页面</h3>
    <el-form-item label="账号名称" prop="username">
        <el-input v-model="registerForm.username" placeholder="注册账号" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="输入密码" prop="password">
        <el-input type="password" v-model="registerForm.password" placeholder="6-20位密码，包含数字、大小写字母、特殊字符两种" autocomplete="off"></el-input>
        <el-progress :percentage="passwordPercent" :format="passwordPercentFormat" :show-text="true" :text-inside="true" :stroke-width="15" :color="pwdColorF">
        </el-progress>
    </el-form-item>
    <el-form-item label="确认密码" prop="repass">
        <el-input type="password" v-model="registerForm.repass" placeholder="确定密码" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="tel">
        <el-input type="text" v-model="registerForm.tel" placeholder="手机账号" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="输入邮箱">
        <el-input type="email" v-model="registerForm.email" placeholder="确定邮箱" autocomplete="off"></el-input>
        <el-button type="success" size="mini" @click="sendEmailCode" style="width: 30%;">邮箱验证码</el-button>
    </el-form-item>
    <el-form-item label="验证码  ">
        <el-input type="captcha" v-model="registerForm.emailCode" placeholder="验证码" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="上传图片">
        <el-input v-if="false"></el-input>
        <el-upload
                class="upload-demo"
                action="upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-change="onchange"
                :auto-upload="false"
                accept=".jpg,.png,.jpeg"
                list-type="picture">
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2000kb</div>
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="doRegister" style="width: 63%;">注册</el-button>
    </el-form-item>
    <el-row style="text-align: center;margin-top: -10px;">
        <el-link type="primary" @click="doLogin">登录</el-link>
    </el-row>
</el-form>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data() {

            let checkUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号名称'));
                } else {
                    let format = new FormData()
                    format.append("username", this.registerForm.username)
                    $.post({
                        url: "business/confirmUsernameExist",
                        data: format,
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false,
                        success: function (d) {
                            if (d === "用户名已被占用") {
                                callback(new Error(d))
                            } else {
                                callback()
                            }
                        }
                    })
                }
            };
            let checkTel = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error("请输入手机号码"));
                } else {
                    const TelReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                    const flag = TelReg.test(value);
                    if (!flag) {
                        callback(new Error("手机格式错误"));
                    } else {
                        callback()
                    }
                }
            }
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    let ls = 0;
                    if (this.registerForm.password !== '') {
                        // this.$refs.registerForm.validateField('checkPass');
                        if(this.registerForm.password.match(/([a-z])+/)){
                            ls++;
                        }
                        if(this.registerForm.password.match(/[0-9]+/)){
                            ls++;
                        }
                        if(this.registerForm.password.match(/[A-Z]+/)){
                            ls++;
                        }
                        //if (this.form.userPassword.match(/([\W])+/) && !this.form.userPassword.match(/(![\u4E00-\u9FA5])+/)) {

                        if(this.registerForm.password.match(/([\W])+/) || this.registerForm.password.match(/(![\u4E00-\u9FA5])+/)){
                            ls++;
                        }
                        if(this.registerForm.password.length<6 || this.registerForm.password.length>20){
                            ls = 0;
                            callback(new Error("密码需要6-20位"))
                        }
                        if(this.registerForm.password.match(/([\u4E00-\u9FA5])+/)){
                            callback(new Error("不能包含中文字符"))
                            ls = 0;
                        }
                        switch (ls){
                            case 0: this.passwordPercent = 0; callback(new Error('密码至少包含数字、大小写字母、特殊字符两种')); break;
                            case 1: this.passwordPercent = 30; callback(new Error('密码至少包含数字、大小写字母、特殊字符两种')); break;
                            case 2: this.passwordPercent = 60; break;
                            case 3: this.passwordPercent = 60; break;
                            case 4: this.passwordPercent = 100; break;
                            default: this.passwordPercent = 0; break;
                        }
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {

                passwordPercent:0,
                registerForm: {
                    username: '',
                    password: '',
                    repass: '',
                    email: '',
                    emailCode: '',
                    imageUrl: '',
                    tel: ''
                }
                ,
                rules: {
                    password: [
                        {required:true,validator: validatePass, trigger: ['blur','change']},
                        // { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,20}$/, message: '6-20位密码，至少包含数字、大小写字母、特殊字符两种' }
                    ]
                    ,
                    repass: [
                        {required:true,validator: validatePass2, trigger: ['blur','change']}
                    ]
                    ,
                    username: [
                        {required:true,trigger: 'blur', validator: checkUsername}
                    ]
                    ,
                    tel: [
                        {required:true,trigger: 'blur', validator: checkTel}
                    ]
                }
                ,
                fileList: []
                ,
                formdata: {}
                ,

            }
        },
        methods: {
            passwordPercentFormat(percentage) {
                return percentage === 30 ? '弱' : percentage === 60 ? '中' : percentage === 100 ? '强' : '弱'
            },
            pwdColorF(percentage) {
                return percentage === 30 ? '#FF5340' : percentage === 60 ? '#FFB640' : percentage === 100 ? '#25DC1B' : '#FF5340'
            },
            doLogin: function () {
                location.href = "/login.html"
            },
            doRegister: function () {
                let format = new FormData()
                format.append("username", this.registerForm.username)
                format.append("password", this.registerForm.password)
                format.append("repass", this.registerForm.repass)
                format.append("email", this.registerForm.email)
                format.append("tel", this.registerForm.tel)
                format.append("emailCode", this.registerForm.emailCode)
                format.append("imageUrl", this.registerForm.imageUrl)
                $.post({
                    url: "business/register",
                    data: format,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function (data) {
                        if (data === "ok") {
                            //注册成功,提示并跳转到登录页
                            alert("注册成功,立即前往登录页")
                            location.href = "/login.html"
                        } else {
                            //注册失败
                            alert(data);
                        }
                    }
                })
            },
            sendEmailCode: function () {
                // alert("email")
                // alert(this.registerForm)
                $.post("business/getEmailCode", {email: this.registerForm.email}, function (data) {
                        if (data === "ok") {
                            alert("验证码发送成功，请注意查收")
                        } else {
                            alert(data)
                        }
                    }
                )
            }
            ,
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
            ,
            onchange(file, fileList) {
                if (fileList.length > 1) {
                    fileList.splice(0, 1)
                }
                // 必须为file。raw
                this.registerForm.imageUrl = file.raw
                console.log(this.registerForm.imageUrl)
                console.log(file.raw.type)
                const isJPG = file.raw.type === 'image/jpeg';
                const isPNG = file.raw.type === 'image/png';
                const isLt2000K = file.size / 1024 < 2000;
                if (!isPNG&&!isJPG) {
                    console.log("不是图片")
                    this.$message.error('上传图片只能是JPG或者PNG格式！')
                    this.registerForm.imageUrl = '';
                    fileList.splice(0, 1);
                }
                if (!isLt2000K) {
                    this.$message.error("上传图片不能超过2000K！")
                    this.registerForm.imageUrl = '';
                    fileList.splice(0, 1);
                }
            }
            ,

        }
    });
</script>

</body>
</html>